<!--   2020年10月19日13:52:58 -->
<template>
  <view class="main">
    <u-navbar :title="userInfo.name" :autoBack="true" @leftClick="leftClick" :safeAreaInsetTop="false"></u-navbar>
    <view class="content">
      <view class="search_left" style="padding:10upx">
        <u-search @search="search" placeholder="请输入姓名搜索" v-model="keyword"></u-search>
      </view>
      <!-- 点击选择 -->
      <view v-if="isPlay">
        <u-cell-group v-if="navList.length>0">
          <u-cell isLink :title="item.name" v-for="(item,index) in navList" @click="navChange(index,item)" :key="index">
          </u-cell>
        </u-cell-group>
        <!-- 单选 -->
        <u-cell-group v-else>
          <u-cell v-for="(item,index) in user" :key="index">
            <view slot="title" class="image_item">
              <image :src="item.avatar" mode=""></image>
              <text>{{item.name}}</text>
            </view>
            <view slot="value" class="u-slot-value" @click="changeAccountPayType(item.name,item)">
              <radio :class="selectedAccountId == item.name ? 'checked' : ''" :checked="selectedAccountId == item.name" :value="item.name" />
            </view>
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 搜索 -->
      <view v-if="isSeach">
        <u-cell-group>
          <!-- 部门 -->
          <u-cell isLink :title="item.label" v-for="(item,index) in SeachUser.filter((x)=>x.pid==0)[0].children" @click="navChange(index,item)" :key="index">
          </u-cell>
          <u-cell v-for="(item,index) in SeachUser.filter((x)=>x.pid==1)[0].children" :key="index">
            <view slot="title" class="image_item">
              <text>{{item.label}}</text>
            </view>
            <view slot="value" class="u-slot-value" @click="changeAccountPayType(item.label,item)">
              <radio :class="selectedAccountId == item.label ? 'checked' : ''" :checked="selectedAccountId == item.label" :value="item.label" />
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
    <view class="footer" @click="save(false,selectedAccountId,templateUser )">
      <u-button size="large" type="primary" text="确定"></u-button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      model: {
      },
      navList: [],
      user: [],
      userInfo: {},
      selectedAccountId: null, // 选中的会员卡ID
      keyword: '',
      isPlay: true,
      isSeach: false,
      SeachUser: [],//搜索
      templateUser: {},// 选中人的所有数据
    }
  },
  mounted() {
    if (this.type == 1) {
      this.getList()
    }

  },
  methods: {
    // 取值
    changeAccountPayType(accountId, val) { // 点击其中的一张会员卡
      this.templateUser = val
      if (this.selectedAccountId == accountId) { // 如果已经选中，则取消选中
        this.selectedAccountId = ''
      } else { // 否则进行选中赋值
        this.selectedAccountId = accountId
      }
    },
    getList() {
      const params = {
        deptId: this.model.deptId,
        type: 2
      }
      this.$u.api.GetDetpUserInfo(params).then((res) => {
        if (res.data) {
          this.navList = res.data.depts
          this.userInfo = res.data.model
          if (res.data.user.length > 0) {
            this.user = res.data.user
          }
        }
      })
    },
    navChange(i, item) {
      this.isPlay = true,
        this.isSeach = false
      this.model.deptId = item.oid
      this.getList()
    },
    // 确定
    save(kk, item, user) {
      this.$emit('onchange', item, user)
    },
    leftClick() {
      this.isPlay = true,
        this.isSeach = false
      if (this.userInfo.name != '长江三峡通航管理局') {
        this.model.deptId = this.userInfo.parentId
        this.getList()
      } else {
        this.$emit('onchange', '', '')
      }
    },

    // 搜索
    // pid为0 部门 1人员
    search() {
      if (this.keyword) {
        const params = {
          seach: this.keyword,
        }
        this.$u.api.GetSeacTree(params).then((res) => {
          this.isPlay = false,
            this.isSeach = true
          this.SeachUser = res.data

        })
      } else {
        this.getList()
      }

    },

  }
}
</script>
<style lang='scss' scoped>
.main {
  height: 100vh;

  .image_item {
    display: flex;
    align-items: center;

    image {
      width: 70upx;
      height: 70upx;
      border-radius: 50%;
    }

    text {
      margin-left: 10px;
    }
  }

  .content {
    height: 80%;
    overflow-y: auto;
    margin-top: 50px;
    .nav {
      margin-top: 1px;
      height: 40px;
      line-height: 40px;
      background: #fff;
      padding-left: 10px;
      padding-right: 10px;
      overflow-x: auto;

      &-list {
        overflow-x: auto;
        white-space: nowrap;
      }

      &-item {
        //padding-left: 5px;
        padding-right: 5px;
        text-decoration: underline;
        color: #387cdf;
      }

      &-gt {
        //margin-left: 5px;
      }
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 99;
  }
}
</style>
